<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		#note{
			width:400px;
			height: 600px;
			/* border: 1px solid black ; */
			border-radius: 0.375rem;
			position: absolute;
			left: 26.25rem;
			box-shadow: 6px 6px 12px gray;
		}
		#ip1{
			width: 380px;
			height: 30px;
			border: 0rem;
			outline: none;
			line-height:30px ;
			font-size: 1.25rem;
			padding-left: 10px;
			
		}
		#removeMsg{
			background-color: #FFFFFF;
			border: 0px;
			outline: none;
			position: absolute;
			left:350px
		}
		#clear{
			background-color: #FFFFFF;
			border: 0px;
			outline: none;
			margin-left: 240px;
		}
		
		</style>
		<!-- 引入vue的js文件 -->
		<script src="js/vue.js"></script>
	</head>
	<body>
		<!-- 记事本：
		 在页面上可以输入内容，当敲击回车时，输入的事项进入到记事本列表中
		 可以对列表中的事件进行删除
		 在记事本的左下角显示共有的记录条数
		 在记事本的右下角可以点击清空，则所有数据消失
		 可以对细节部分进行处理：点击清空后，记录条数与清空按钮消失
		 只有在记事本中有数据时，才会显示清空按钮-->
		 <div id="app">
		 	<div id="note">
		 		<div style="text-align: center;color: red;">
		 			<h2>记事本</h2>
		 		</div>
		 		<div>
		 			<input id="ip1" type="text" placeholder="请输入。。。" 
					v-model="iptMsg" @keydown.enter="addMsg()"
					/>
		 			<hr />
		 		</div >
		 		<!-- 显示列表中数据的区域 -->
		 		<div style="height: 400px;padding-left: 10px;">
		 			<h6 v-for="item,index in notelist">	
						{{item}}				
		 				<button id="removeMsg" @click="removeMsg(index)">&times;</button>
		 			</h6>
		 			
		 		</div>
		 		<div v-show="notelist.length!=0">
		 			<hr />
		 			<span>共有{{notelist.length}}条数据</span>
		 			<button id="clear" @click="clearMsg()">清空</button>
		 		</div>			
		 	</div>		 	
		 </div>
	</body>
	<script>
	var app=new Vue({
		el:"#app",
		data:{
			notelist:["吃饭饭","睡觉觉","打豆豆"],
			iptMsg:""
			
		},
		methods:{
			addMsg:function(){
				console.log(this.iptMsg)
				this.notelist.push(this.iptMsg)
				this.iptMsg=""
			},
			removeMsg:function(index){
				this.notelist.splice(index,1)
			},
			clearMsg:function(){
				this.notelist=[]
			}
			
			
		}
	})
	</script>
	
	
</html>
